<template>
  <div class="related-movies">
    <!-- 相关影片 -->
    <header>
      <span>相关影片</span>
    </header>
    <div class="movies">
      <ul>
        <li v-for="item in relatedMovies" :key="item.id">
          <router-link :to="`/moviepage/${item.id}`">
            <div class="img-box">
              <img :src="item.img" alt="" />
              <div class="img-mask"></div>
              <div class="grade">
                <span>猫眼评分</span>
                <span class="score">{{ item.sc }}</span>
              </div>
            </div>
            <span class="name">{{ item.title }}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    relatedMovies: Array,
  },
};
</script>

<style lang="less" scoped>
.related-movies {
  margin-top: 8px;
  background-color: #fff;
  header {
    height: 45px;
    padding-left: 15px;
    font-size: 15px;
    line-height: 45px;
    color: #333;
    span {
      font-size: 15px;
      line-height: 45px;
      color: #333;
    }
  }
  .movies {
    ul {
      display: flex;
      justify-content: flex-start;
      padding: 0 13px;
      overflow-x: scroll;
      li {
        flex-shrink: 0;
        padding: 0 4px 15px 0;
        .img-box {
          position: relative;
          width: 96px;
          height: 134px;
          border-radius: 2px;
          overflow: hidden;
          .img-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
              -180deg,
              rgba(29, 29, 29, 0) 68%,
              #1d1d1d
            );
          }
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .grade {
            position: absolute;
            top: 114px;
            left: 6px;
            font-size: 11px;
            color: #faaf00;
            span {
              font-size: 11px;
              color: #faaf00;
            }
          }
        }
        .name {
          display: block;
          width: 96px;
          font-size: 15px;
          color: #333;
          margin-top: 7px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}
</style>